<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/resource">
</head>
<title>分享主页</title>
<link rel="stylesheet" th:href="@{css/sharingHomepage.css}">
<body>
<div class="app_download">
  <div class="cancel_txt">
    <span class="cancel"></span>
    <span class="txt">火石镜头</span>
  </div>
  <div class="download jumpApp">
    在APP中收藏素材
  </div>
</div>
<div id="wrapper">
  <div class="container">
    <div class="ltx_user_info">
      <!--头部用户信息-->
    </div>
    <div class="ltx_home_list">
      <lu class="list clearfix" id="thelist">
        <!--作品列表-->
      </lu>
      <div class="pullUp">
        <span class="loading_icon"></span>
        <span class="loading_text">加载中...</span>
      </div>
    </div>
    <div class="collection_box">
      <div class="collection_word">收藏好的素材可以在App中下载</div>
      <div class="collection_btn">
        <img th:src="@{image/collection.png}">
      </div>
    </div>
  </div>
</div>
<!--播放视频的播放器-->
<div class="video_box">
  <div class="video_wrap">
    <video
        id="video_play"
        autoplay="autoplay"
        loop="loop"
        controls="controls"
        src="">
      您的浏览器不支持 video 标签。
    </video>
  </div>
</div>
<div class="protective_cover"></div>
</body>
<script th:src="@{js/iscroll.js}"></script>
<script th:src="@{js/base64/base64.min.js}"></script>
<script type="text/html" id="userInfo">
  <div class="personal_card">
    <div class="info1">
      <div class="photo">
        <img src="{{user.headPortraitUrl}}" alt="">
      </div>
      <div class="describe_box">
        <div class="describe_title">{{user.nickName}}</div>
        <div class="play_participants">
          给您分享了{{count.videoCount}}个素材
        </div>
      </div>
    </div>
  </div>
</script>
<script type="text/html" id="homeList">
  {{each sourceVideoList as value index}}
  {{if(sourceVideoList.length==1)}}
  <li class="item" data-url="{{value.playUrl}}"
      style="position: relative;width: 100%;height: 4.42666667rem !important;">
    <div class="cover" style="background-image:url('{{value.coverUrl}}');">
      <img class="play_single" th:src="@{image/play_single.png}" alt="">
      <div class="rank">
        <span class="fr">
          <span class="rank_num">{{value.duration}}</span>
        </span>
      </div>
    </div>
  </li>
  {{else}}
  <li class="item" data-url="{{value.playUrl}}" style="position: relative;">
    <div class="cover" style="background-image:url('{{value.coverUrl}}');">
      <div class="rank">
        <span class="fr">
          <span class="rank_num">{{value.duration}}</span>
        </span>
      </div>
    </div>
  </li>
  {{/if}}
  {{/each}}
</script>
<script>
  $(function () {
    FastClick.attach(document.body);//解决300ms点击延迟的问题iphone
    var param = {
      page: 1,
      rows: 10,
      shareId: GetRequest().shareId
    };
    var myscroll,
      addNum;//记录每次加载的条数
    var video = $("#video_play")[0];
    load();

    // 初始化加载
    function load() {
      swipeup();
      pullOnLoad(param) //一开始加载数据；
      /**
       * 所有的点击事件
       */
      //点击头部的在app中收藏按钮跳转app
      $(".jumpApp").on("click", function () {
        var u = navigator.userAgent;
        if (/MicroMessenger/gi.test(u) || u.match(/QQ\//i) == "QQ/") {
          if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {//ios环境)
            $(".protective_cover").css("background-image", "url([[@{image/ios.png}]])")
          }
          $(".protective_cover").show();
          return false;
        }
        jumpApp("huanai://ltx");
      })
      //  去掉引导
      $(".protective_cover").on("click", function () {
        $(this).hide();
      })
      //点击视频出现播放视频
      $(".ltx_home_list").on("click", ".item", function () {
        var video_url = $(this).attr("data-url");

        if (video_url == "") {
          layer.open({
            content: "没有该视频"
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
          return false;
        }
        $(".video_box .video_wrap #video_play").prop("src", video_url);
        $(".video_box").removeClass("find_out").addClass("find_in");
      })
      //点击视频取消视频播放
      $(".video_box #video_play").on("click", function () {
        video.pause();
        $(".video_box").removeClass("find_in").addClass("find_out");
      })
      //  点击收藏视频素材跳转
      $(".collection_btn").on("click", function () {
        $.post("[[@{/sourceVideo/collect}]]", {shareId: param.shareId}, function (res) {
          var data = JSON.parse(res);
          if (data.ret == "16") {
            window.location.href = "login?shareId=" + param.shareId
          } else if (data.ret == "0") {
            data.user.mobile = Base64.encode(data.user.mobile);
            window.location.href = "expot?shareId=" + data.user.mobile;
          } else {
            layer.open({
              content: data.msg
              , skin: 'msg'
              , time: 2 //2秒后自动关闭
            });
          }
        })
      })
    }

    //滚动加载数据
    function swipeup() {
      if (myscroll) {
        myscroll.destroy();
        myscroll = null;
      }
      myscroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉动时
          //上拉加载
          if (this.y < this.maxScrollY) {
            $(".pullUp").html("释放加载");
            $(".pullUp").addClass("loading").show();
          } else {
            if (addNum >= 10) {
              $(".pullUp").html("上拉加载");
              $(".pullUp").removeClass("loading").hide();
            }
          }
        },
        onScrollEnd: function () { //拉动结束时
          //上拉加载
          if ($(".pullUp").hasClass('loading')) {
            if (addNum < 10) {
              $(".pullUp").html("已经没有了");
            } else {
              $(".pullUp").html("<span class='loading_icon'></span><span class='loading_text'>加载中...</span>");
              param.page += 1
              pullOnLoad(param);
            }
          }
        }
      });
    }

    //上拉加载函数,ajax
    function pullOnLoad(args) {
      console.log(args)
      setTimeout(function () {
        $.post('[[@{/sourceVideo/shareVideoList}]]', {
          page: args.page,
          rows: args.rows,
          shareId: args.shareId
        }, function (data) {
          var data = JSON.parse(data);

          if (data.ret == "0") {
            //将时间格式转换成00:00
            data.sourceVideoList.forEach(function (v) {
              v.duration = formatDuring(v.duration)
            })
            //渲染头部信息
            var userInfo = template("userInfo", data);
            $(".ltx_user_info").html(userInfo);

            var data_length = data.sourceVideoList.length;
            addNum = data_length;

            if (data_length <= 0) {
              $(".pullUp").html("已经没有了");
            } else {

              //对只有一个分享视频的情况对图片的宽高做判断，避免图片被拉伸；
              if (data.count.videoCount == 1) {
                imgContrast(data.sourceVideoList[0].coverUrl)
              }
              //渲染列表模板
              var homelList = template("homeList", data);
              $(".ltx_home_list .list").append(homelList);
              if (data_length < 10) {
                $(".pullUp").html("已经没有了");
              } else {
                $(".pullUp").html("上拉加载");
              }
            }
            //重置列表的高度
            picListHeight();
            myscroll.refresh();
          } else {
            layer.open({
              content: data.msg
              , skin: 'msg'
              , time: 2 //2秒后自动关闭
            });
          }
        })

      }, 1000);
    }

    // 图片列表的高度
    function picListHeight() {
      // 列表的高度，宽高1比1.3
      var height = 1.3 * ($(".ltx_home_list .list .item").width());
      var marginBottom = $(".ltx_home_list .list .item").css("margin-right");
      $(".ltx_home_list .list .item").css("height", height);
      $(".ltx_home_list .list .item").css("margin-bottom", marginBottom);
    }

    //对图片的宽高对比
    function imgContrast(url) {
      var img_url = url + "?" + Date.parse(new Date());
      // // 创建对象
      var img = new Image();
      // // 改变图片的src
      img.src = img_url;

      img.onload = function () {
        if (img.width < img.height) {
          $("#wrapper .ltx_home_list .list .item .cover").css("background-size", "contain")
        }
      }
    }
  })

</script>

</html>